<style scoped >

  .search {
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    align-items: flex-end;
    text-align: right;
    /*padding-bottom: 10px;*/
    margin-top: 20px;
    position: relative;
  }

  .search h3 {
    flex: 1;
    text-align: center;
  }

  .search>div {
    flex: 3;
    text-align: left;
    display: flex;
    flex-direction: row;
    /*position: relative;*/
    align-items: center;
  }
  .search>div>p{
    color: #E0E0E0;
    position: absolute;
    right: 7%;
    margin-top: -7px;
    top: 50%;
  }

  .search div ul{
    position: fixed;
    left: 0;
    top:120px;
    width:100%;
    /*padding: 0 20px;*/
    /*margin-left: 8px;*/
    /*padding-left: 12px;*/
    z-index: 10000000;
    background: #ffffff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
  }
  .search div ul li{

  }
  .search>div>ul>li>div{
    padding: 8px 20px;
    display: flex;
    border-bottom: 1px solid #e9e9e9;
    margin-right: 4px;
    justify-content: space-between;
  }
  .search>div>ul>li>div p:last-child{
    text-align: right;
  }
  .search div ul li p{
    color: #666666;
    text-align: left;
  }
  .search div ul li p.right{
    font-weight: 500;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  .search > div > h3 {
    position: absolute;
    right: 24%;
    background: #7590FF;
    color: #FFFFFF;
    border-radius: 4px;
    padding: 0 4px;
  }

  .search input {
    width: 90%;
    outline: none;
    -webkit-appearance: none;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    /*margin:0 40px 0 16px;*/

    padding-left: 10px;
    font-size: 14px;
    background: #EDF1F5;
  }
  .right{
    text-align: right;
  }

  .divcontent{
    overflow: scroll;
  }

  .content {
    display: flex;
    flex-direction: column;
  }

  .mint-tab-container-wrap{
    width:100%;
  }
  .mint-tab-container-item{
    width:100%;
  }
  @media screen and (max-width: 320px) {
    .content > div {
      margin-top: 6px;
    }
    .mint-tab-container{
      height:199px;
    }
    .second{
      height:156px;
      overflow-y: scroll;
    }
    .search input{
      height: 26px;
    }
    .search h3{
      margin-bottom: 1px;
    }
    .signal-footer>div>h2{
      height: 32px;
    }
    .first-left h3:first-child{
      font-size: 16px;
    }
  }
  @media screen and (max-width:375px) and (min-width:321px) {
    .content > div {
      margin-top: 14px;
    }
    .mint-tab-container{
      height:234px;
    }
    .second{
     height:181px;
      overflow-y: scroll;
    }
    .search input{
      height: 32px
    }
    .search h3{
      margin-bottom: 2px;
    }
    .signal-footer>div>h2{
      height: 38px;
    }
    .first-left h3:first-child{
      font-size: 19px;
    }
  }
  @media screen and (min-width: 376px){
    .content > div {
      margin-top: 18px;
    }
    .mint-tab-container{
      height:276px;
    }
    .second{
      height:200px;
      overflow-y: scroll;
    }
    .search input{
      height: 36px
    }
    .search h3{
      margin-bottom: 2px;
    }
    .signal-footer>div>h2{
      height: 41px;
    }
    .first-left h3:first-child{
      font-size: 21px;
    }
  }

  .first {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 2px solid #EDF1F5;
    padding: 10px 20px 20px 20px;
  }

  .first-left {
    /*border-bottom: 1px solid #E9E9E9;*/
    padding-bottom: 6px;
  }
  .first-left h3:first-child{
    color: #000;
  }
  .first-left h3:last-child{
    margin-top: 10px;
  }

  .first-right{
    text-align: right;
  }

  .first-right h1 {
    display: inline;
    color: #F84949;
  }
  .first-right p{
    margin-top: 6px;
  }


  .introduce{
    padding: 0 20px;
  }
  .introduce>div{
    display: inline-flex;
  }
  .introduce>div>h3{
    margin-left: 20px;
    position: relative;
    opacity: 0.5
  }

  .introduce>div>h3:first-child{
    margin-left: 0;
  }

  .second {
    margin-top: 6px;
    /*border-bottom: 1px solid #EDF1F5;*/
    /*margin-bottom: 20px;*/
  }
  .second>div>p{
    margin: 0px 20px 0 20px;
  }

  .backgd{
    height:3px;
    background: #EDF1F5;
    margin-left: 20px;
  }
  .total-income{
    border-top:2px solid #EDF1F5;
    padding: 0 20px;
  }
  .total-income ul{
    display: flex;
    padding-top: 20px;
    flex-direction: row;
    justify-content: space-between;
  }
  .total-income ul li{

  }
  .total-income ul li h3{
    color: #F84949;
  }
  .total-income ul li h1{
    color: #F74949;
  }

  .acount{
    display: flex;
  }
  .acount h3{
    padding:0 70px 6px 0;
    border-bottom: 1px solid #e9e9e9;
  }
  .money{
    display: flex;
    flex-direction: column;
    width:100%;
  }
  .money ul{
    display: flex;
    flex-direction: row;
  }
  .money ul li{
    flex: 1;
    text-align: center;
    padding:10px 0;
  }
  .color{
    color: #667DF7;
  }
  .third {
    display: flex;
  }
  .third>div:first-child{
    flex:6;
  }
  .third>div:last-child{
    flex: 4;
  }

  .third-left>p{
    padding-bottom: 4px;
  }
  .third-left ul{
    display: inline-flex;
    margin-top: 8px;
    width:100%;
  }
  .third-left ul li{
    flex: 1;
    display: flex;
    padding: 6px 0;
    justify-content: space-between;
    padding-right: 20px;
  }
  .third-left ul li p{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .third>div.third-right{
  }
  .third>div.third-right>p{
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 4px;
  }
  .third>div.third-right ul{
    display: flex;
    flex-direction: column;
    margin-top: 8px;
  }
  .third>div.third-right ul li{
    display: flex;
    flex-direction: row;
    padding: 4px 0 4px 0;
    justify-content: space-between;
  }
  .third>div.third-right ul li p{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .buy{
    border:1px solid #F84949;
    color: #F84949;
    padding:0 2px;
    border-radius: 4px;
  }
  .seal{
    border:1px solid #83BBFF;
    color: #83BBFF;
    padding:0 2px;
    border-radius: 4px;
  }

  .four {
    display: flex;
    flex-direction: row;
  }
  .four>.four-left{
    width:60%;
  }
  .four>.four-right{
    width:40%;
  }

  .four > div > p {
    border-bottom: 1px solid #e9e9e9;
  }


  .four > div>p{
    margin-right: 24px;
  }
  .four > div  > div {
    margin-top: 4px;
    display: flex;
    flex-direction: row;
  }

  .four > div > div > h1 {
    color: #4D63EB;
  }

  .four > div:last-child > div > h1{
    border-bottom: 1px solid #e9e9e9;
  }

  .four > div  > div > div {
    display: -webkit-box;
  }

  .four > div  > div > div h2 {
    /*padding: 0 3px;*/
    width:26px;
    height:26px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(102, 102, 102, 0.49);
    border-radius: 100%;
    box-shadow: 0 2px 4px rgba(102, 102, 102, 0.2);
  }
  .four > div  > div > div h2:last-child{
    margin-left: 6px;
  }
  .num{
    display: flex;
    flex-direction: row;
  }
  .num input{
    height:32px;
    border:none;
    border-bottom: 1px solid #e9e9e9;
    width:50%;
    font-size: 20px;
    color: #4D63EB;
  }
  .num>div{
    width:50%;
  }

  .signal-footer {
    width: 100%;
    margin-top: 20px!important;
  }
  .signal-footer>div{
    padding:0 20px;
    display: flex;
  }
  .signal-footer>div>div{
    flex: 7;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: -webkit-linear-gradient(left top,#6379F7,#91A5F7);
    border-radius: 6px;
  }


  .signal-footer>div p{
    flex:3;
    /*background: #7792FF;*/
    color: #ffffff;
    height:32px;
    line-height: 32px;
    text-align: center;
  }


  .signal-footer>div>h2{
    width:39px;
    background: -webkit-linear-gradient(top left,#6379F7,#91A5F7);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    color: #ffffff;
    margin-left: 20px;
    position: relative;
  }
  .signal-footer>div>h2>h5{
    position: absolute;
    right: -4px;
    top: -4px;
    color: #F74949;
    border: 1px solid #F74949;
    border-radius: 3px;
    padding: 0 2px;
    background: #ffffff;
  }
  .signal-footer>div>div>b{
    height:100%;
    width:1px;
    background: #ffffff;
  }
  .mint-navbar{
    margin:0 40px;
    padding: 0 20px;
    border:1px solid #e9e9e9;
    border-radius: 16px;
  }
  .mint-navbar .mint-tab-item{
    margin:6px 0!important;
    padding:0!important;
  }
  .mint-tab-item:first-child{
    border-right:1px solid #e9e9e9!important;
  }
  .mint-navbar .mint-tab-item.is-selected span{
    /*border-bottom: 3px solid #6379F8;*/
    color: #4D66FF;
    padding: 0 0 3px 0;
    position: relative;
  }
  .mint-navbar .mint-tab-item.is-selected span b{
    width:60%;
    height:3px;
    background: #6379F8;
    border-radius: 4px;
    position: absolute;
    left: 20%;
    bottom:-4px;
  }
  .mint-navbar .mint-tab-item.is-selected{
    border:none;
    opacity: 1;
  }
  .mint-navbar .mint-tab-item{
    padding:14px 0;
    opacity: 0.5;
  }
  .mint-tab-container-item{
    /*height:179px!important;*/
  }
  .mint-popup-right{
    height:100%;
    width: 150px;
    z-index: 100000000 !important;
  }
  /*.mint-popup{*/
    /*width:150px!important;*/
  /*}*/
  .st{
    height:100%;
    width:120px;
    padding: 4px 15px;
    /*padding-bottom: 100px;*/
    overflow: scroll;
    padding-top:30px;
  }
  .stock{
    padding: 10px 0;
    border-bottom: 1px solid #e9e9e9;
  }
  .stock:last-child{
    margin-bottom: 100px;
  }
  .stock-first{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .stock-right h3{
    color: #C8C8C8;
    margin-top: 4px;
  }
  .stock-second{
    display: flex;
    flex-direction: row;
    margin-top: 6px;
  }
  .stock-second p{
    color: #666;
    background: #edf1f5;
    border-radius: 4px;
    padding:2px 6px;
  }
  .stock-second p.active{
    background: #83BBFF;
    color: #ffffff;
    opacity: 1;
  }
  .stock-second p:last-child{
    margin-left: 6px;
  }
  .stock-third{
    margin-top:6px;
    border:1px solid rgba(102,102,102,0.5);
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .stock-third>p{
    color: #FE7A4A;
  }
  .alldeal{
    position:fixed;
    width:100%;
    bottom:0;
    padding-bottom: 10px;
    background: #ffffff;
  }
  .alldeal>div{
    margin:0 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .alldeal input{
    background: #EDF1F5;
    border:none;
    border-radius: 4px;
    height:24px;
    padding-left: 6px;
    font-size: 12px;
  }
  .alldeal input::-webkit-input-placeholder{
    text-align: center;
    font-size: 12px;
  }
  .alldeal>div>h3{
    background: #FE7A4A;
    color: #ffffff;
    border-radius: 4px;
    height:34px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .xzcolor{
    color: #4D63EB;
  }
  /*.model{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000;
  }*/
  .inborder{
    border:1px solid #f84949!important;
  }
  .noaccount{
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .noaccount h2{
    color: #4D63EB;
  }

  /*底部弹出*/
  .tanchu {
    width: 100%;
    display: flex;
    position: relative;
    /*height: 300px;*/
    flex-direction: column;
    color: #555;
  }
  .magical{
    position: absolute;
    top:-18px;
    left:20px;
    background: #ffffff;
    box-shadow: 0 2px #ccc;
    /*width:200px;*/
    /*height:40px;*/
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 6px 16px;
  }
  .tanchu>.t1{
    width:100%;
    height:50px;
    display: flex;
    border-bottom: 1px solid #dedde3;
    padding-bottom: 10px;
  }
  .tanchu>.t1>ul{
    display: flex;
    margin: 10px 0 0 20px;
  }
  .tanchu>.t1>ul>li:last-child{
    margin-left: 40px;
  }
  .tanchu>.t1>ul>li>h1{
    color: #a4a3a9;
    font-size: 12px;
    text-align: center;
    margin-top: -4px;
  }
  .t{
    margin-top: 36px;
  }
  .t>div{
    border-bottom: 1px solid #e9e9e9;
    padding: 10px 20px
  }
  .t1 ul{
    display: flex;
    flex-direction: row;
  }
  .t1 ul>li:last-child{
    margin-left: 80px;
  }
  .t1 ul>li>h1{
    color: #F84949;
  }
  .t1 ul>li>p{
    color: rgba(158,153,169,0.7);
  }
  .othert1 ul li{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .othert1 ul li h1{
    margin-left: 10px;
  }
  .othert3{
    display: flex;
    flex-direction: row;
    padding:14px 20px!important;
  }
  .othert3 p{
    display: flex;
    align-items: center;
  }
  .othert3>div{
    display: flex;
    flex-direction: row;
    margin-left: 10px;
    height:100%;
  }
  .othert3>div>input{
    border: none;
    height:26px;
    background: #F5F5F5;
    border-radius: 8px;
    padding-left: 10px;
    margin-left: 4px;
    font-size: 12px;
  }
  .othert3>div>input::-webkit-input-placeholder{

  }
  .t2{
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  .t2 ul{
    display: flex;
    flex-direction: row;
    margin-top: 10px;
  }
  .t2 ul li{
    border-radius: 10px;
    padding:4px 30px;
    color: #ffffff;
    font-weight: 300;
    background: #F5F5F5;
    color: #666666;
  }
  .t2 ul li.active1 {
    background: linear-gradient(to right, #6379F8, #91A5F8)!important;
  }
  .t2 ul li.active1 p{
    color: #fff;
  }
  .t2 ul li:last-child{
    margin-left: 40px;
  }
  .buynum{
    display: inline-flex;
    width:100%;
    align-items: center;
  }
  .buynum p{
    flex: 3;
  }
  .buynum input{
    flex:7;
    height:25px;
    background: #F5F5F5;
    border:none;
    border-radius: 8px;
    margin-right: 100px;
    padding-left: 20px;
    font-size: 12px;
  }
  .t4{
    display: flex;
    flex-direction: column;
  }
  .t4 ul{
    display: flex;
    flex-direction: row;
    margin-top: 8px;
  }
  .t4 ul li{
    flex: auto;
  }
  .t4 ul li p{
    text-align: center;
  }
  .t4 ul li h3{
    text-align: center;
  }
  .t4 ul li:first-child h3,.t4 ul li:nth-child(2) h3{
    color: #667DF7;
  }
  .t4 ul li P{
    color: rgba(102,102,102,0.5);
  }
  .gendan{
    width: 100%;
  }
  .gendan ul{
    display: flex;
    flex-direction: row;
    background: linear-gradient(to right,#6379F8,#91A5F8);
    flex-wrap: nowrap;
  }
  .gendan ul li{
    flex-grow: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    /*padding:10px 0;*/
  }
  .gendan ul b{
      width:1px;
      background: #ffffff;
  }
  .gendan ul li:last-child{
    flex-grow: 1;
  }
  .gendan ul li:last-child>h1{
    /*width:49px;
    height:40px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    color: #ffffff;
    position: relative;
  }
  .gendan ul li:last-child>h1>h5{
    position: absolute;
    right: -4px;
    top: -4px;
    color: #F74949;
    border: 1px solid #F74949;
    border-radius: 3px;
    padding: 0 2px;
    background: #ffffff;
  }
  .gendan ul li:last-child>h1>h6{
    position: absolute;
    color: #F74949;
    top: -15px;
    /*display: none;*/
    opacity: 0
  }

  @keyframes myfirst {
    0% {
      top: -15px;
      opacity: 0
    }
    1%{
      top: -15px;
      opacity: 1
    }
    100% {
      top:-24px;
      opacity: 0
    }
  }

  .gendan ul li h3{
    font-weight: 300;
    letter-spacing:3px;
    color: #ffffff;
  }
  .gendan ul li h4{
    margin-top: 12px;
    margin-left: 2px;
    font-weight: 300;
    color: #ffffff;
  }
  .gendan ul li:first-child{

  }
  .gendan ul li:last-child{
    /*background: linear-gradient(to left, #91A5F8, #6379F8)*/
    margin-left: 4px;
  }
  .gendan ul>div{
    height:46px;
    width:1px;
    background: #ffffff;
  }
  .introActive{
    color: #546BFF;
    opacity: 1!important;
  }
  .introduce>div>h3.introActive b{
    position: absolute;
    width:80%;
    left:10%;
    bottom:-3px;
    height:3px;
    background: #546BFF;
  }
  .second>div{
    height:100%;
  }
  .echarts {
    height:100%;
    width:100%;
  }
  .echarts1{
    height:90%;
    width: 100%;
  }
  .ball{
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    background: linear-gradient(to right,#6379F8,#91A5F8);
    border-radius: 50%;
    /*transition: all 1s cubic-bezier(.22,-0.86,.97,.58);*/
  }
  .bollMove{
    animation: myfirst 0.5s;
    /*animation-timing-function: cubic-bezier(0, 0.95, 1, 0.08);*/
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .numBig{
    animation: myfirst2 0.3s;
    animation-timing-function: cubic-bezier(0, 0.95, 1, 0.08);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  @keyframes  myfirst2{
    0% {
        transform: scale(1);
    }
    50% {
      transform: scale(1.4);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes  myfirst{
      /*0% {
          right: 20px;
          bottom: 20px;
          transform: scale(0);
      }*/
      0% {
        right: 20px;
        bottom: 20px;
        transform: scale(1);
      }
      /*25% {
        right: 4px;
        bottom: 120px;
        transform: scale(0.9);
      }*/
      50% {
        right: -12px;
        bottom: 200px;
        transform: scale(0.8);
      }
      /*75% {
        right: -28px;
        bottom: 120px;
        transform: scale(0.7);
      }*/
      99% {
        right: -40px;
        bottom: 10px;
        transform: scale(0.6);
      }
      100% {
        right: -44px;
        bottom: 10px;
        transform: scale(0);
      }
  }
.mint-popup-bottom{
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    z-index: 100000000!important
  }

</style>

<style>
  .mint-popup{
    width:100%;
    /*border-top-right-radius: 10px;
    border-top-left-radius: 10px;*/
  }
  .mint-toast{
    z-index: 100000001!important
  }

</style>
<template>
  <div class="signal" ref="signalheight">
    <mt-popup
      v-model="popupVisible"
      position="bottom">
      <div class="tanchu">
        <div class="magical"><h2>{{allData.name}}</h2></div>
        <div class="t">
          <div class="t1">
            <ul>
              <li>
                <h1 v-if="allData.price">${{allData.price.last | money}}</h1>
                <p>最新价格</p>
              </li>
              <li>
                <h1 v-if="allData.price">${{allData.price.last*stockNum | money}}</h1>
                <p>总金额</p>
              </li>
            </ul>
          </div>
          <div class="t2">
            <p>选择交易方式</p>
            <ul>
              <li v-bind:class="{active1:!isActive1}" @click="numberBuy"><p>多头</p></li>
              <li v-bind:class="{active1:!isActive2}" @click="moneyBuy"><p>空头</p></li>
            </ul>
          </div>
          <div class="buynum">
            <p>购买数量</p>
            <input type="number" placeholder="请输入购买数量" v-model="stockNum"/>
          </div>
          <div class="third-left">
            <p>参考交易价格</p>
            <ul>
              <li>
                <p class="buy">买一</p>
                <p v-if="allData.price">{{allData.symbol}}{{allData.price.bid | money}}</p>
                <p v-if="allData.price">{{allData.price.biddepth}}股</p>
              </li>
              <li>
                <p class="seal">卖一</p>
                <p v-if="allData.price">{{allData.symbol}}{{allData.price.offer | money}}</p>
                <p v-if="allData.price">{{allData.price.offerdepth}}股</p>
              </li>
            </ul>
          </div>
          <div class="t4" v-if="accountMoney">
            <p>认购必读</p>
            <ul>
              <li>
                <h3 v-if="accountMoney.total_value===null">$0</h3>
                <h3 v-else>${{accountMoney.total_value | money}}</h3>
                <p>可用金额</p>
              </li>
              <li>
                <h3 v-if="accountMoney.buying_power===null">$0</h3>
                <h3 v-else>${{accountMoney.buying_power | money}}</h3>
                <p>最多透资金额</p>
              </li>
              <li>
                <h3 v-if="accountMoney.total_position===null">$0</h3>
                <h3 v-else>${{accountMoney.total_position | money}}</h3>
                <p>交易市值</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="gendan">
          <ul>
            <li @click="smart">
              <h3>立即交易</h3>
            </li>
            <b></b>

            <li @click="startBuy" style="position: relative;">
              <h3>添加至组合</h3>
              <div class="ball" v-show="show" :class={bollMove:bollMove}>
                  <div class="inner"></div>
              </div>
              <!--</router-link>-->
            </li>
            <div></div>
            <li @click="pupupRight">
              <h1 class="iconfont icon-combine-manage">
                <h5 :class="{numBig: numBig}">{{joinTrade.length}}</h5>
              </h1>
            </li>
          </ul>
        </div>
      </div>
    </mt-popup>
    <div class="search">
      <h3>搜索股票</h3>
      <div>
        <input type="text" placeholder="代码/名称" v-model="inputValue"/>
        <p class="iconfont" @click="clearInput" :class="{'icon-guanbi2fill': clearShow}"></p>
        <ul v-if="hasSearch">
          <li v-for="searchdata in searchData" @click="stock(searchdata._id)">
            <div>
              <p class="right">{{searchdata.name}}</p>
              <p>{{searchdata._id}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="divcontent">
      <div class="content" v-if="stockShow">
      <!--<mt-navbar v-model="selected">-->
        <!--<mt-tab-item id="1"><span>相关资料<b></b></span></mt-tab-item>-->
        <!--<mt-tab-item id="2"><span>我的账户<b></b></span></mt-tab-item>-->
      <!--</mt-navbar>-->
      <!--<mt-tab-container v-model="selected">-->
        <!--<mt-tab-container-item id="1">-->
          <div class="first">
            <div class="first-left">
              <h3>{{allData.name}}</h3>
              <h3 style="color: rgba(102,102,102,0.5)">{{_id}}</h3>
            </div>
            <div class="first-right">
              <h1 v-if="allData.price">{{allData.symbol}}{{allData.price.last | money}}</h1>
              <p style="color: rgba(102,102,102,0.5)">最新价格</p>
            </div>
          </div>
          <div class="introduce">
            <div>
              <h3 v-for="(introduction,index) in introductions" :class="{introActive: introduction.active}" @click="clickIntroduce(index)">{{introduction.name}}
              <b></b></h3>
            </div>
          </div>
          <div class="second">
              <div v-if="introductions[0].active" style="margin-bottom:20px;">
                <p v-if="allData.intro">&nbsp;&nbsp;&nbsp;&nbsp;{{allData.intro}}</p>
                <p v-else style="text-align:center;margin-top:20px;font-size:20px;">暂时没有介绍喔~</p>
              </div>
            <div v-if="introductions[1].active">
              <div class="echarts" v-if='isLine1'>
                <chart :options="line1"></chart>
              </div>
              <p v-else style="text-align:center;margin-top:20px;font-size:20px;">暂时没有K线图喔~</p>
            </div>
            <div v-if="introductions[2].active">
              <div class="echarts" v-if='isLine2'>
                <chart :options="line2"></chart>
              </div>
              <p v-else style="text-align:center;margin-top:20px;font-size:20px;">暂时没有风格得分喔~</p>
            </div>

          </div>
          <div class="total-income">
            <ul>
              <li>
                <h4>总收入</h4>
                <h1 v-if="allData.fin_summary">${{allData.fin_summary.total_revenue | muchmoney}}</h1>
                <h1 v-else>$0</h1>
              </li>
              <li>
                <h4>每股分红</h4>
                <h1 v-if="allData.fin_summary">{{allData.fin_summary.dividend_per_share | money}}</h1>
                <h1 v-else>0</h1>
              </li>
              <li>
                <h4>每股盈利</h4>
                <h1 v-if="allData.fin_summary" style="color: #4D66FF">{{allData.fin_summary.eps | money}}</h1>
                <h1 v-else style="color: #4D66FF">0</h1>
              </li>
            </ul>
          </div>
          <div class="signal-footer">
            <div>
              <div>
                <p @click="tradeImm">立即交易</p>
                <b></b>
                <p @click="join">添加至组合</p>
              </div>
              <h2 class="iconfont icon-combine-manage" @click="pupupRight">
                <h5>{{joinTrade.length}}</h5>
              </h2>
            </div>
          </div>
    </div>
    </div>

    <!-- <div class="model" style="z-index:2000;" v-if="signalModel" @click="clickModel"></div> -->
    <mt-popup
      v-model="popupVisible2"
      position="right">
      <div class="st">
        <div class="stock" v-for="(joinTr,index) in joinTrade">
          <div class="stock-first">
            <div class="stock-left">
              <h3>{{joinTr.name}}</h3>
              <p>{{joinTr._id}}</p>
            </div>
            <div class="stock-right">
              <h3 class="iconfont icon-lajitong" @click="deleteStock(index)"></h3>
            </div>
          </div>
          <div class="stock-second">
            <p :class="{active: joinTr.isActive1}" v-if="joinTr.isActive1">多头</p>
            <p :class="{active: joinTr.isActive2}" v-if="joinTr.isActive2">空头</p>
            <p>{{joinTr.stockNum | zheng}}份</p>
          </div>
          <!-- <div class="stock-third">
            <h3 class="iconfont icon-jian" @click="stockPlus(index)"></h3>
            <p>{{joinTr.stockNum | zheng}}</p>
            <h3 class="iconfont icon-jiahao1" @click="stockSub(index)"></h3>
          </div> -->
        </div>
      </div>
      <div class="alldeal">
        <div>
          <p style="color: #f84949;text-align: center" v-if="moneyEnough">您的金额不足</p>
          <input type="text" placeholder="请命名组合名称" v-model="tradeName" :class="{inborder: hasBorder}">
          <h3 @click="tradeAll">全部交易</h3>
        </div>

      </div>
    </mt-popup>
  </div>
</template>

<script>
  import ECharts from '../../node_modules/vue-echarts/components/ECharts.vue'
  import echart from 'echarts'
  import '../../node_modules/echarts/lib/echarts'
  import 'echarts/lib/chart/candlestick'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/chart/radar'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/dataZoom'
  import 'echarts/lib/component/toolbox'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/visualMap'
  import 'echarts/lib/component/graphic'

  import myFooter from '../components/footer.vue'
  import { Navbar, TabItem } from 'mint-ui';
  import { TabContainer, TabContainerItem } from 'mint-ui'
  import { Popup } from 'mint-ui'
  import {Toast} from 'mint-ui'
  import axios from 'axios'
  import host from '../config'
  import {Indicator} from 'mint-ui'


  export default {
    components: {
      myFooter,
      mtNavbar: Navbar,
      mtTabItem: TabItem,
      mtTabContainer: TabContainer,
      mtTabContainerItem: TabContainerItem,
      mtPopup: Popup,
      chart: ECharts
    },
    data () {
      return {
        selected: '1',
        stockNum: null,
        popupVisible: false,
        popupVisible2: false,
        isActive: true,
//        isActive2: true,
        inputValue: null,
        searchData: null,
        allData: null,
        _id: null,
        stockShow: false,
        accountMoney: null,
        isBind: false,
//        加入策略
        joinTrade: [],
        tradeName: null,
        sendTrade: [],
        // signalModel: false,
        hasBorder: false,
        moneyEnough: false,
        introActive: true,
        styleActive: true,
        dayActive: true,
        introductions:[
          {name: '介绍','active': true},
          {name: '日K','active': false},
          {name: '风格','active': false}
        ],
        // K线图
        line1: null,
        // 雷达图
        line2: null,
        // 多头，空头
        isActive1: true,
        isActive2: true,
        hasSearch: false,
        show: false,
        bollMove:false,
        numBig: false,
        clearShow: false,
        isLine1: true,
        isLine2: true
      }
    },
    watch: {
     inputValue (newData, oldData) {
       let that = this
       that.searchData = null
       if(newData.length==0) {
         that.clearShow = false
       } else {
         that.clearShow = true
       }
       if(newData.length<2) {
         this.hasSearch = false
         return
       }else {
         this.hasSearch = true
       }
       axios({
         method: 'GET',
         headers: {'Authorization': window.localStorage.getItem('token')},
         timeout: 60000,
         url: host.host + `/api/security/search?s=${newData}`
       }).then(function (data) {
         if(data.data.code === 6006) {
           that.$router.push('/login')
         }
         if(data.data.code === 6007){
           that.$refreshToken()
         }
         if(data.data.code === 200) {
          //  that.signalModel = true
           that.searchData = data.data.data
           if(that.searchData.length === 0) {
            //  that.signalModel = false
           }
         }
       }).catch((err) => {

       })
     },
      tradeName (newData, oldData) {
        if(newData.length !==0) {
          this.hasBorder = false
        }
      }
    },
    mounted () {

      // this.$refs.signalheight.style.height = h1 + 'px'
      this.$store.state.strategyActive = 1
      let that = this
      axios({
        method: 'GET',
        timeout: 60000,
        headers: {'Authorization': window.localStorage.getItem('token')},
        url: host.host + `/api/trade/capital`
      }).then(function (data) {
        if(data.data.code === 6006) {
          that.$router.push('/login')
        }
        if(data.data.code === 6007){
          that.$refreshToken()
        }
        if(data.data.code !== 6008){
          that.isBind = true
          if(data.data.code === 200) {
            that.accountMoney = data.data.data
          }
        }else{
          that.isBind = false
          return
        }
      }).catch((err) => {
      })

      if(this.$route.query.id) {
        this.stock(this.$route.query.id)
      }
      if(JSON.parse(window.localStorage.getItem('composeStick'))) {
        this.joinTrade = JSON.parse(window.localStorage.getItem('composeStick'))
      }else{
        this.joinTrade = []
      }


    },

    methods: {
      goBack () {
        Indicator.close()
        this.$router.push('./index')
      },
      toMessage () {
        Indicator.close()
        this.$router.push('/messageCenter')
      },
      plus () {
        this.stockNum = parseInt(this.stockNum) + 1
      },
      subtract () {
        if (this.stockNum <= 0) {
          this.stockNum = 0
        }else{
          this.stockNum -= 1
        }
      },
      // 右边弹出
      pupupRight () {

        if(this.isBind === false) {
          Toast({
            message: '未开户,无法交易喔~',
            duration: 1500
          })
          return
        }
        if(this.popupVisible == true) {
          this.popupVisible = false
        }
        this.popupVisible2 = true
      },
//      bull () {
//        this.isActive2 = true
//        this.isActive1 = !this.isActive1
//      },
//      bear () {
//        this.isActive1 = true
//        this.isActive2 = !this.isActive2
//      },

      // 点击股票
      stock (_this) {
        let that = this
        that.searchData = null
        that._id = _this
        // that.signalModel = false
        that.inputValue = null
        that.hasSearch = false
        Indicator.open()
        axios({
          method: 'GET',
          headers: {'Authorization': window.localStorage.getItem('token')},
          timeout: 60000,
          url: host.host + `/api/security/info?s=${_this}`
        }).then(function (data) {
          Indicator.close()
          that.stockShow = true
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if(data.data.code === 200) {
            // that.isDetail = true
            that.allData = data.data.data
            that.stockNum = null
          }
        }).catch((err) => {
          // that.isDetail = false
          Indicator.close()
        })

        let time = [],volumes = [],dataMA5,dataMA10,dataMA20
        let oclh = []
        var colorList = ['#FD4B5F','#2DB984', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
        function calculateMA(dayCount, data) {
          var result = [];
          for (var i = 0, len = data.length; i < len; i++) {
            if (i < dayCount) {
              result.push('-');
              continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
              sum += parseFloat(data[i - j][1]);
            }
            result.push((sum / dayCount).toFixed(2));
          }
          return result;
        }
        var labelFont = 'bold 12px Sans-serif';

        // K线图
        axios({
          method: 'GET',
          timeout: 60000,
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + `/api/security/candle?s=${_this}`
        }).then(function (data) {
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }

          if(data.data.code === 200) {
            that.isLine1 = true
            let getData = data.data.data
            for (let i = 0; i < getData.length; i++) {
              time.push(getData[i][0])
              oclh.push([getData[i][1].toFixed(2),getData[i][2].toFixed(2),getData[i][3].toFixed(2),getData[i][4].toFixed(2)])
              volumes.push([i,getData[i][5],getData[i][1]>getData[i][2]?-1:1])
              volumes.push(getData[i][5])
            }
            dataMA5 = calculateMA(5, oclh);
            dataMA10 = calculateMA(10, oclh);
            dataMA20 = calculateMA(20, oclh);
            that.line1 = {
              calculable: false,
              animation: false,
             tooltip: {
               trigger: 'axis',
              //  axisPointer: {
              //    type: 'cross'
              //  },
               formatter: function (params) {
                var res = '日期: ' + ' ' + params[0].name;
                if(params[0].value[3]) {
                  res += '<br/>  开盘 : ' + params[0].value[1] + '  最高 : ' + params[0].value[4];
                  res += '<br/>  收盘 : ' + params[0].value[2] + '  最低 : ' + params[0].value[3];
                }
                if(params[1] && params[2] && params[3].value) {
                  res += '<br/>  MA5 : ' + params[1].value;
                  res += '<br/>  MA10 : ' + params[2].value;
                  res += '<br/>  MA20 : ' + params[3].value;
                }
                if(!params[0].value[3]) {
                  res += '<br/>  成交量 : ' + params[0].value[1];
                }
                return res;
              },
               backgroundColor: 'rgba(245, 245, 245, 0.8)',
               borderWidth: 1,
               borderColor: '#ccc',
               padding: 10,
               textStyle: {
                 color: '#000'
               },
               position: function (pos, params, el, elRect, size) {
                 var obj = {top: 10};
                 obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                 return obj;
               },
               extraCssText: 'width: 170px'
             },
             visualMap: {
               show: false,
               seriesIndex: 4,
               dimension: 2,
               pieces: [{
                   value: 1,
                   color: '#FD4B5F'
               },
                {
                   value: -1,
                   color: '#2DB984'
               }]
            },
              grid: [
                {
                  left: '0%',
                  right: '0%',
                  top: "1%",
                  height: "60%",
                  width: '100%'
                },
                {
                  left: '0%',
                  right: '0%',
                  top: "48%",
                  height: "40%",
                  width: '100%'
                }
              ],
              dataZoom: [
                {
                  type: 'inside',
                  xAxisIndex: [0, 1],
                  start: 40,
                  end: 70,
                  top: 30,
                  height: 20,
                  handleSize: '2000%'
                }
              ],
              xAxis : [
                {
                  type : 'category',
                  show:false,
                  axisTick: {show:false},
                  axisLine: {show:false},
                  data : time,
                },
                {
                  type: 'category',
                  gridIndex: 1,
                  data: time,
                  axisTick: {show:false},
                  axisLine: {show:false},
                  axisLabel: {
                    fontSize: 8,
                    color: '#666666',
                    opacity: 0.5
                  },
                  // scale: true,
                  // boundaryGap: false,
                  // splitLine: {show: false},
                  // axisLabel: {show: false},
                  // axisLine: true,
                  // axisTick: {show: false},
                  // splitNumber: 20,
                  // min: 'dataMin',
                  // max: 'dataMax',
                  // axisPointer: {
                  //   type: 'shadow',
                  //   label: {show: false},
                  //   triggerTooltip: true,
                  //   handle: {
                  //     show: true,
                  //     margin: 30,
                  //     color: '#B80C00'
                  //   }
                  // },
                  position:'bottom'

                }
              ],
              yAxis : [
                {
                  type : 'value',
                  scale:true,
                  boundaryGap: [0.01, 0.01],
                  axisLabel: {
                    show: false
                  },
                  boundaryGap: false,
                  splitLine: {
                    show: false,
                    lineStyle:{
                      type: 'dashed',
                      color: '#e9e9e9',
                      opacity: 0.5
                    }
                  },
                  axisLine: false,
                  axisTick: false
                },
                {
                  scale: true,
                  gridIndex: 1,
                  splitNumber: 2,
                  axisLabel: {show: false},
                  axisLine: {show: false},
                  axisTick: {show: false},
                  splitLine: {show: false}
                }
              ],
              series : [

                {
                  type:'candlestick',
                  data:oclh,
                  itemStyle: {
                    normal: {
                      color: '#ef232a',
                      color0: '#14b143',
                      borderColor: '#ef232a',
                      borderColor0: '#14b143'
                    },
                    emphasis: {
                      color: '2DB984',
                      color0: '#444',
                      borderColor: 'black',
                      borderColor0: '#444'
                    }
                  }
                },
                {
                  name: 'MA5',
                  type: 'line',
                  data: dataMA5,
                  smooth: true,
                  itemStyle: {
                    normal: {
                      color: '#8090FF'
                    }
                  },
                  showSymbol: false,
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  }
                }, {
                  name: 'MA10',
                  type: 'line',
                  data: dataMA10,
                  smooth: true,
                  itemStyle: {
                    normal: {
                      color: '#BD10E0'
                    }
                  },
                  showSymbol: false,
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  }
                }, {
                  name: 'MA20',
                  type: 'line',
                  data: dataMA20,
                  smooth: true,
                  itemStyle: {
                    normal: {
                      color: '#F3E42B'
                    }
                  },
                  showSymbol: false,
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  }
                },
                {
                  name: '成交量',
                  type: 'bar',
                  xAxisIndex: 1,
                  yAxisIndex: 1,
                  data: volumes
                }
              ]
            }
          }
        }).catch((err) => {
          that.isLine1 = false
          console.log(err)
        })

        // 雷达图
        axios({
          method: 'GET',
          timeout: 60000,
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + `/api/security/styles?s=${_this}`
        }).then(function(data){
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          let indicatorData = []
          let dataValue = []
          if(data.data.code == 200) {
            that.isLine2 = true
            for(let i = 0; i < data.data.data.length; i++) {
              dataValue.push(data.data.data[i].v)
              indicatorData.push({name: data.data.data[i].n,max: 100})
            }
            that.line2 = {
                radar: {
                    nameGap : 4,
                    name: {
                        textStyle: {
                            color: '#6E6E6E',
                            fontSize: '8px'
                       }
                    },
                    radius: '70%',
                    splitNumber: 4,
                    splitArea: {
                      areaStyle: {
                          color: '#ffffff',
                      }
                    },
                    axisLine:{
                      lineStyle: {
                          color: '#EDF1F5'
                      }
                    },
                    splitLine: {
                      lineStyle: {
                          color: '#EDF1F5'
                      }
                    },
                    indicator: indicatorData
                },
                series: [{
                    type: 'radar',
                    data : [
                       {
                        value : dataValue,
                        // symbol:{
                        //   show:false
                        // },
                        symbolSize: 0,
                        lineStyle: {
                          normal: {
                            color: '#00DEC3'
                          }
                        },
                        areaStyle: {
                            normal: {
                              color: new echart.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                  {offset: 0, color: '#00DEC3'},
                                  {offset: 1, color: '#00CDD4'}
                                ]
                              )
                            }
                        }
                      }
                    ]
                }]
            };
          }
        }).catch((err) => {
          that.isLine2 = false
        })

      },

      // k线图


      // 清除输入框
      clearInput () {
        this.inputValue = null
      },
//      个股交易弹出
      tradeImm () {
        this.popupVisible = true
      },
      // 加入策略弹出
      join () {
        this.popupVisible = true
      },
      // 多头空头
      numberBuy () {
        this.isActive1 = false
        this.isActive2 = true
      },
      // 空头
      moneyBuy () {
        this.isActive2 = false
        this.isActive1 = true
      },
      // 个股交易
     smart () {
       let that = this
       if(that.isBind === false) {
         Toast({
           message: '未开户,无法交易喔~',
           duration: 1500
         })
         return
       }
       if(that.stockNum === 0) {
         Toast({
           message: '数量不能为0',
           duration: 1500
         })
         return
       }
       if(that.isActive1 == true && that.isActive2 == true) {
         Toast({
           message: '请选择交易方式',
           duration: 1500
         })
         return
       }
       if(that.isActive1 == false) {
         if(that.stockNum * that.allData.price.last > that.accountMoney.buying_power) {
           Toast({
             message: '您的金额不足',
             duration: 1500
           })
           return
         }
       }
       if(that.allData.unit) {
         if(that.stockNum % that.allData.unit != 0) {
           Toast({
             message: `数量必须为${that.allData.unit}的整数倍`,
             duration: 2000
           })
           return
         }
       }
       if(that.isActive2 == false) {
         that.stockNum = -that.stockNum
       }
       axios({
         method: 'POST',
         headers: {'Authorization': window.localStorage.getItem('token')},
         timeout: 60000,
         data: {
           s: that._id,
           q: parseInt(that.stockNum),
           c: that.allData.currency
         },
         url: host.host + `/api/trade/securityOpen`
       }).then(function (data) {
         if(data.data.code === 6006) {
           that.$router.push('/login')
         }
         if(data.data.code === 6007){
           that.$refreshToken()
         }
         if(data.data.code === 200) {
           that.stockNum = 0
           that.$router.push({path:'../signalSuccess',query:{id:that.$route.query.id}})
         }
       }).catch((err) => {

       })
     },
//      加入策略
//      join () {
//        let that = this
//        if(that.isBind === false) {
//          Toast({
//            message: '未开户,无法交易喔~',
//            duration: 1500
//          })
//          return
//        }
//        if(that.stockNum === 0) {
//          Toast({
//            message: '数量不能为0',
//            duration: 1500
//          })
//          return
//        }
//        if(that.isActive1 == true && that.isActive2 == true) {
//          Toast({
//            message: '请选择交易方式',
//            duration: 1500
//          })
//          return
//        }
//        if(that.allData.unit) {
//          if(that.stockNum % that.allData.unit != 0) {
//            Toast({
//              message: `数量必须为${that.allData.unit}的整数倍`,
//              duration: 2000
//            })
//            return
//          }
//        }
//        Toast({
//          message: '加入成功',
//          duration: 1000
//        })
////        if(that.isActive2 == false) {
////          that.stockNum = - that.stockNum
////        }
//        that.joinTrade.push({
//          name: that.allData.name,
//          _id: that._id,
//          isActive1: !that.isActive1,
//          isActive2: !that.isActive2,
//          stockNum: that.stockNum,
//          c: that.allData.currency,
//          fx: that.allData.fx,
//          price: that.allData.price.last
//        })
//        window.localStorage.setItem('composeStick',JSON.stringify(that.joinTrade))
//        that.stockNum = 0
//        that.isActive1 = true
//        that.isActive2 = true
//      },
      // stockPlus (_index) {
      //   this.joinTrade[_index].stockNum --
      //   if (this.joinTrade[_index].stockNum<0) {
      //     this.joinTrade[_index].stockNum = 0
      //   }
      //   window.localStorage.setItem('composeStick',JSON.stringify(this.joinTrade))
      // },
      // stockSub (_index) {
      //   this.joinTrade[_index].stockNum ++
      //   window.localStorage.setItem('composeStick',JSON.stringify(this.joinTrade))
      // },
      deleteStock (_index) {
        this.joinTrade.splice(_index,1)
        window.localStorage.setItem('composeStick',JSON.stringify(this.joinTrade))
        this.moneyEnough = false
      },
      // 全部交易
      tradeAll () {
        let that = this
        let stockNum = JSON.parse(window.localStorage.getItem('composeStick'))
        if (!stockNum || stockNum.length == 0){
          Toast({
            message: '没有可交易的股票',
            duration: 1500
          })
          return
        }
        if(that.tradeName === null) {
          that.hasBorder = true
          return false
        }

        that.sendTrade = []
        let totalMoney = 0
        for(var i = 0; i<stockNum.length; i++) {
          var flag
          if(that.joinTrade[i].isActive1 == true) {
            totalMoney += parseInt(that.joinTrade[i].stockNum) * that.joinTrade[i].price * that.joinTrade[i]
            flag = 1
          }else{
            flag = -1
          }
          that.sendTrade.push({
            s: that.joinTrade[i]._id,
            q: that.joinTrade[i].stockNum * flag,
            c: that.joinTrade[i].c
          })
        }
        if(totalMoney > that.accountMoney.buying_power) {
          that.moneyEnough = true
          return false
        }

          axios({
          method: 'POST',
          headers: {'Authorization': window.localStorage.getItem('token')},
          timeout: 60000,
          data: {
            group: that.sendTrade,
            name: that.tradeName
          },
          url: host.host + `/api/trade/securityGroup`
        }).then(function (data) {
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if(data.data.code === 200) {
//            that.popupVisible = false
            that.joinTrade = []
            that.tradeName = null
            window.localStorage.removeItem('composeStick')
            that.$router.push({path:'../signalSuccess',query:{id:that.$route.query.id}})
          }
        }).catch((err) => {

        })
      },
      toopen () {
        this.$router.push('./open2')
      },
      // clickModel () {
      //   this.signalModel = false
      //   this.searchData = null
      // },
//      介绍,日K,风格
      clickIntroduce (_index) {
        for (let i = 0;i < this.introductions.length; i++) {
          this.introductions[i].active = false
        }
        this.introductions[_index].active = true
      },
      // 加入策略
      startBuy (event) {
       let that = this
       if(that.isBind === false) {
         Toast({
           message: '未开户,无法交易喔~',
           duration: 1500
         })
         return
       }
       if(that.stockNum === 0) {
         Toast({
           message: '数量不能为0',
           duration: 1500
         })
         return
       }
       if(that.isActive1 == true && that.isActive2 == true) {
         Toast({
           message: '请选择交易方式',
           duration: 1500
         })
         return
       }
       if(that.allData.unit) {
         if(that.stockNum % that.allData.unit != 0) {
           Toast({
             message: `数量必须为${that.allData.unit}的整数倍`,
             duration: 2000
           })
           return
         }
       }
      //  Toast({
      //    message: '加入成功',
      //    duration: 1000
      //  })
//        if(that.isActive2 == false) {
//          that.stockNum = - that.stockNum
//        }
       that.joinTrade.push({
         name: that.allData.name,
         _id: that._id,
         isActive1: !that.isActive1,
         isActive2: !that.isActive2,
         stockNum: that.stockNum,
         c: that.allData.currency,
         fx: that.allData.fx,
         price: that.allData.price.last
       })
       window.localStorage.setItem('composeStick',JSON.stringify(that.joinTrade))
       that.stockNum = null
       that.isActive1 = true
       that.isActive2 = true
       that.show = true;
       that.bollMove = true
       that.numBig = true
       setTimeout(function(){
         that.show = false;
         that.bollMove = false
         that.numBig = false
       },1000)
     },
    },
    updated() {
      let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      let h1 = h - 60
      this.$refs.signalheight.style.height = h1 + 'px'
    },
    filters: {
      money (data) {
        if(data) {
          if(data>10000) {
            return (parseFloat(data/10000)).toFixed(2) + '万'
          }else {
            return (parseFloat(data)).toFixed(2)
          }
        }else {
          return 0
        }
      },
      zheng (data) {
        return Math.abs(data)
      },
      muchmoney (data) {
        if(data >= 100000000) {
          return (data / 100000000).toFixed(2) + '亿'
        } else if (data < 100000000 && data >= 10000) {
          return (data / 10000).toFixed(2) + '万'
        }else {
          return data
        }
      }
    }
  }
</script>
